<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=EDGE" />
    <title>ECharts China Map</title>
    <style>
      #china-map {
        width: 1000px;
        height: 800px;
        position: absolute;
        left: calc(50% - 500px);
        top: 100px;
      }
    </style>
    <script
      type="text/javascript"
      src="https://unpkg.com/echarts/dist/echarts.min.js"
    ></script>
    <script
      type="text/javascript"
      src="https://unpkg.com/axios/dist/axios.min.js"
    ></script>
  </head>

  <body>
    <button id="back" style="display: none;">返回全国</button>
    <div id="china-map"></div>

    <script>
      const chart = echarts.init(document.querySelector("#china-map"));
      const oBack = document.querySelector("#back");
      
      let mapCaches = {};
      let isChild = false;

      function getAreaMap(areaCode, isFull) {
        return axios
          .get("https://geo.datav.aliyun.com/areas_v2/bound/" + areaCode + (isFull ? "_full" : "") + '.json',)
          .then(function (res) {
            return Promise.resolve(res.data);
          });
      }

      oBack.onclick = function () {
        loadMap("china", "中国", {
          code: 100000,
          isFull: true
        });

        isChild = false;
        oBack.style.setProperty('display', 'none');
      };

      loadMap("china", "中国", {
        code: 100000,
        isFull: true
      });

      // 加载相应的地图
      function loadMap(map, name, { code, isFull }) {
        let promise = Promise.resolve();

        if (!mapCaches[map]) {
          promise = getAreaMap(code, isFull).then((mapData) => {
            echarts.registerMap(map, mapData);

            mapCaches[map] = mapData;
          });
        }

        promise.then(() => {
          const option = {
            title: {
              text: name,
              left: "center",
            },
            series: [
              {
                name: name,
                type: "map",
                map,
                roam: false, // 是否开启鼠标缩放和平移漫游
                itemStyle: {
                  // 地图区域的多边形 图形样式
                  normal: {
                    // 是图形在默认状态下的样式
                    label: {
                      show: true, //是否显示标签
                      textStyle: {
                        color: "rgba(255,255,255,0)",
                      },
                    },
                  },
                },
                aspectScale: map === 'china' ? 0.75 : 1,
                top: "10%", //组件距离容器的距离
              },
            ],
          };

          chart.setOption(option);

          chart.off("click");
          chart.off("dblclick");

          chart.on("click", function (param) {
            const mapData = mapCaches[map];
            if(mapData) {
              const mapInfo = mapData.features.find(m => {
                return m.properties.name === param.name;
              });
              const properties = mapInfo.properties;

              loadMap(properties.adcode, properties.name, {
                code: properties.adcode,
                isFull: properties.level !== 'district'
              })
            } 

            if(!isChild) {
              isChild = true;

              oBack.style.setProperty('display', 'block');
            }
          });
        });
      }
    </script>
  </body>
</html>
